{{define "title"}}
<div id="title-ul" class="list-group" style="height: 700px;overflow-y: auto;border: 2px solid black;border-radius: 5px;">
</div>
<script>
	$(function() {
		$.get("/api/list", {pid: 0, type: api}, function(data) {
			var text = "";
			if (data) {
				$.each(data.list, function(k, v) {
					if (k === 0) {
						$("#api-select").text(v.name + "(" + v.nameCn + ")");
					}
					if (v.name === v.nameCn) {
						if (text) {
							text += '<a flag="' + v.id + '" class="list-group-item">' + v.name + '</a>';
						} else {
							text += '<a flag="' + v.id + '" class="list-group-item active">' + v.name + '</a>';
						}
					} else {
						if (text) {
							text += '<a flag="' + v.id + '" class="list-group-item">' + v.name + '(' + v.nameCn + ')' + '</a>';
						} else {
							text += '<a flag="' + v.id + '" class="list-group-item active">' + v.name + '(' + v.nameCn + ')' + '</a>';
						}
					}
				});
				$("#title-ul").html(text);
				$("#title-ul .list-group-item").click(function() {
					$("#title-ul .active").removeClass("active");
					$(this).addClass("active");
					$("#api-select").text($(this).text());
					$("#api-list").html("");

					var pid = $(this).attr("flag");
                    apiDetail(pid, api);

					$("html,body").animate({scrollTop: 0}, 500);
				});
			}
		}, "json")
	})
</script>
{{end}}